import React, { useState, useRef, useEffect } from 'react';
import { connect } from 'dva';
import { Radio, Card, Button } from 'antd';
import { LineChartOutlined, BarChartOutlined, PieChartOutlined, DownloadOutlined, FileImageOutlined, PictureOutlined, FileExcelOutlined } from '@ant-design/icons';
import ReactEcharts from 'echarts-for-react';
import html2canvas from 'html2canvas';
import XLSX from 'xlsx';

function PieChart({ data }) {
    
    const echartsRef = useRef();
    const textColor = '#afb1b9';
    let seriesData = [];

    // Object.keys(data).forEach(key=>{
    //     seriesData.push({
    //         name:key,
    //         value:data[key].monthCost || 0
    //     })
    // })
    seriesData = [
        { value:65, name:'主机', itemStyle:{ color:'#1adfff'} },
        { value:13, name:'冷却塔', itemStyle:{ color:'#5aa21c'} },
        { value:12, name:'冷冻泵', itemStyle:{ color:'#5e7cff'} },
        { value:10, name:'冷却泵', itemStyle:{ color:'#f4c537' }}
    ]
    
    return (   
        
            <ReactEcharts
                notMerge={true}
                ref={echartsRef}
                style={{ width:'100%', height:'100%'}}
                option={{
                    tooltip:{
                        trigger:'item'
                    },   
                    legend:{                   
                        data: seriesData.map((i) => i.name),
                        left: 'left',
                        top: 'middle',
                        // top:'12%',
                        // bottom:'10%',
                        orient: 'vertical',
                        type: 'scroll',
                        itemWidth: 8,
                        itemHeight: 8,
                        icon: 'circle',
                        formatter: (name) => {
                          let info = seriesData.filter(i=>i.name === name)[0];
                          return `{title|${name}}\n{value|${info.value + '%'}}`;
                        },
                        textStyle: {
                          color: textColor,
                          rich: {
                            title: {
                                fontSize: 12,
                                lineHeight: 12,
                                color:'#fff',
                            },
                            value: {
                              fontSize: 14,
                              lineHeight:16,
                              color:'#fff',
                            },
                          },
                        }                    
                    },
                    series:[{
                        name: '能耗占比',
                        type: 'pie',
                        radius: ['50%', '70%'],
                        center:['60%', '50%'],
                        avoidLabelOverlap: false,
                        label: {
                            show: true,
                            position: 'center',
                            formatter: (params) => {
                                return `{a|能耗占比}\n{b|%}`;
                              },
                            rich: {
                              a: {
                                color:'#fff',
                                fontSize: 18,
                              },
                              b: {
                                color:'#fff',
                                fontSize: 14,
                              },
                            },
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: '30',
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data:seriesData
                    }]
                }}
        />         
    );
}

export default React.memo(PieChart);
